import React, { useMemo } from "react";

function OptimizedComponent({ items, filter }) {
  // 使用 useMemo 缓存过滤结果
  const filteredItems = useMemo(() => {
    console.log("重新计算 filteredItems...");
    return items.filter((item) =>
      item.name.toLowerCase().includes(filter.toLowerCase())
    );
  }, [items, filter]); // 只有当 items 或 filter 变化时重新计算

  // 使用 useMemo 缓存统计信息
  const statistics = useMemo(() => {
    console.log("重新计算 statistics...");
    return {
      total: items.length,
      filtered: filteredItems.length,
      percentage: ((filteredItems.length / items.length) * 100).toFixed(2),
    };
  }, [items, filteredItems]); // 依赖 items 和 filteredItems

  return (
    <div>
      <div>
        统计: {statistics.filtered} / {statistics.total} (
        {statistics.percentage}%)
      </div>
      <ItemList items={filteredItems} />
    </div>
  );
}

// 使用 React.memo 优化子组件
const ItemList = React.memo(function ItemList({ items }) {
  console.log("ItemList 渲染...");
  return (
    <ul>
      {items.map((item) => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
});

export default OptimizedComponent;
